<div class="modal fade" [id]="id" tabindex="-1" role="dialog" [attr.data-backdrop]="backdrop"
     data-keyboard="false">
  <div class="modal-dialog modal-{{ options?.size }}">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title font-weight-bold text-{{ options?.theme }}">
          <span class="{{ options?.cssIcon }}"></span>
          {{ options?.title }}
        </h6>
        <button type="button" class="close" (click)="close()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row mb-3" *ngIf="options?.dynamicComponent">
          <div class="col-12">
            <ng-tools-dynamic-component [component]="options?.dynamicComponent.component"
                                        [data]="options?.dynamicComponent?.data"
                                        [events]="options?.dynamicComponent.events"></ng-tools-dynamic-component>
          </div>
        </div>
        <div class="row mb-3" *ngIf="!options?.dynamicComponent">
          <div class="col-12">
            <span>{{ options?.data }}</span>
          </div>
        </div>
      </div>
      <div class="modal-footer" *ngIf="options?.closeBtn || options?.confirmBtn">
        <button class="btn btn-secondary btn-sm" *ngIf="options?.closeBtn" (click)="close()">关闭</button>
        <button class="btn btn-{{options.theme}} btn-sm" (click)="confirm()" *ngIf="options?.confirmBtn">确定</button>
      </div>
    </div>
  </div>
</div>
